<template>
  <div>
    <el-dialog
      title="新增并同步"
      :visible.sync="dialogVisible"
      width="1200px"
      :before-close="closeAddDialog"
    >
      <div class="header">
        <div class="header_left">
          <!-- <el-select
            v-model="searchForm.dataType"
            filterable
            placeholder="数据类型"
            size="small"
            style="width: 180px; margin-left: 15px"
            @visible-change="selectChange"
            clearable
          >
            <el-option
              v-for="(item, i) in dataTypeList"
              :key="i"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-select
            v-model="searchForm.pushResult"
            filterable
            placeholder="推送结果"
            size="small"
            style="width: 180px; margin-left: 15px"
            @visible-change="selectChange"
            clearable
          >
            <el-option
              v-for="(item, i) in pushResultList"
              :key="i"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select> -->
          <!-- <el-date-picker
              v-model="searchForm.pushTime"
              size="small"
              type="datetime"
              placeholder="推送时间"
              style="width: 200px; margin-left: 15px"
            >
            </el-date-picker> -->
          <el-input
            v-model="searchForm.uid"
            clearable
            @clear="onSearch"
            placeholder="请输入设备编码"
            size="small"
            style="width: 260px; margin-left: 15px"
            maxlength="50"
            oninput="value=value.replace(/[\u4e00-\u9fa5]/g,'')"
          >
            <el-button
              slot="append"
              :icon="loadingSearch ? 'el-icon-loading' : 'el-icon-search'"
              @click="onSearch"
            >
            </el-button>
          </el-input>
          <el-alert
            title="勾选所需新增并同步的设备，点击下方按钮进行确认操作"
            style="
              width: 80%;
              margin-left: 20px;
              background: rgba(115, 103, 240, 0.5);
              color: #b6bee3;
            "
            :closable="false"
            type="info"
          >
          </el-alert>
        </div>
        <div class="header_right"></div>
      </div>
      <div class="content">
        <el-table
          :data="dataList"
          height="400"
          :header-cell-style="headerStyle"
          class="table"
          ref="refTable"
          row-key="id"
          @selection-change="batchSelect"
        >
          <el-table-column
            align="center"
            type="selection"
            :reserve-selection="true"
            width="50"
          ></el-table-column>
          <el-table-column
            align="center"
            label="序号"
            type="index"
            width="70"
            height="30"
            :index="indexMethod"
          ></el-table-column>
          <el-table-column
            align="center"
            prop="uid"
            label="设备编码"
            min-width="140"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="center"
            prop="oid"
            label="oid"
            min-width="180"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="center"
            prop="oidType"
            label="设备型号"
            min-width="140"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="center"
            prop="deviceName"
            min-width="120"
            label="设备名称"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="center"
            prop="id"
            label="监控点位id"
            min-width="180"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="center"
            prop="deviceProvider"
            label="设备供应商"
            min-width="140"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="center"
            prop="address"
            label="安装位置"
            min-width="140"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="center"
            prop="addrGenericName"
            label="地址通用名称"
            min-width="140"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="center"
            prop="addrRoom"
            label="楼层与房号"
            min-width="140"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="center"
            prop="installLocation"
            label="具体安装位置"
            min-width="120"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="center"
            label="广州2000坐标经纬度"
            min-width="150"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{ scope.row.gzGpsLnt }} {{ scope.row.gzGpsLat }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            label="WGS84坐标经纬度"
            min-width="140"
            show-overflow-tooltip
          >
            <template slot-scope="scope">
              {{ scope.row.gpsLnt }} {{ scope.row.gpsLat }}
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="gridCode"
            label="网格编码"
            min-width="140"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="center"
            prop="ext"
            label="设备模拟量"
            min-width="140"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="center"
            prop="deviceOutline"
            label="概述"
            min-width="140"
            show-overflow-tooltip
          ></el-table-column>
          <el-table-column
            align="center"
            prop="updateTime"
            label="最新推送时间"
            min-width="160"
            show-overflow-tooltip
          ></el-table-column>
        </el-table>
        <pagination
          :page.sync="page"
          :limit.sync="limit"
          :total="total"
          :pageSizes="[10, 20, 30, 50]"
          @pagination="getDataList"
          class="pagination"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeAddDialog" class="cancel-button">取 消</el-button>
        <el-button
          size="small"
          @click="addSubmit"
          v-preventReClick="1000" class="confirm-button"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  reqBaiYunDevicePage,
  reqBaiYunDeviceEdit,
  reqBaiYunDeviceRemove,
  reqBaiYunDeviceAdd,
  reqautoGenerate,
  reqallSync,
} from "@api/baiyunArea.js";
import Pagination from "@/components/Pagination.vue";
import { reqManufacturerAdd } from "@api/api";
import tableStyleMixin from "@mixin/table-style";
export default {
  mixins: [tableStyleMixin],
  components: { Pagination },
  props: [],
  data() {
    return {
      dialogVisible: false,
      searchForm: {
        oid: "",
        uid: "",
        oidType: "",
      },
      loadingSearch: false,
      dataList: [
        {
          oid: "",
          uid: "",
          dataType: "",
          pushContent: "",
          pushTime: "",
          pushResult: "",
          content: "",
        },
      ],
      dataTypeList: [
        {
          label: "告警信息",
          value: 1,
        },
        {
          label: "报警处理通知",
          value: 2,
        },
        {
          label: "故障通知",
          value: 3,
        },
        {
          label: "故障处理通知",
          value: 4,
        },
        {
          label: "在离线通知",
          value: 5,
        },
      ],
      pushResultList: [
        {
          label: "成功",
          value: 1,
        },
        {
          label: "失败",
          value: 2,
        },
      ],
      limit: 10,
      page: 1,
      total: 0,
      batchDataList: [],
    };
  },
  watch: {
    dialogVisible(val) {
      if (val) {
        this.searchForm.uid = "";
        this.batchDataList = [];
        this.getDataList();
      }
    },
  },
  methods: {
    // 获取列表
    async getDataList() {
      const res = await reqBaiYunDevicePage(this.page, this.limit, {
        uid: this.searchForm.uid,
        oid: this.searchForm.oid,
        oidType: this.searchForm.oidType,
      });
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      console.log(res, "res");
      let { records, total } = res.data.data;
      this.dataList = records;
      this.total = total;
    },
    // 确认
    addSubmit() {
      this.addClick();
    },
    // 新增
    async addClick() {
      if (!this.batchDataList.length)
        return this.$modal.notifyWarning("请选择需要新增并同步的设备");
      let id = this.batchDataList.map((item) => item.oid);
      const res = await reqBaiYunDeviceAdd(id);
      if (res.code !== 20000) return this.$modal.notifyWarning(res.message);
      this.$modal.notifySuccess("操作成功");
      this.$parent.getDataList();
    },
    // 点击复选框触发，可跨分页选择
    batchSelect(arr) {
      this.batchDataList = arr;
    },
    // 序号
    indexMethod(index) {
      return index + 1 + (this.page - 1) * this.limit;
    },
    // 下拉请求列表
    selectChange(val) {
      console.log(val, "val");
      if (val) {
        // this.getProductList();
      }
    },
    onSearch() {
      this.page = 1;
      //   this.batchDataList = [];
      //   this.$refs.refTable.clearSelection();
      this.getDataList();
    },

    // 点击关闭弹框
    closeAddDialog() {
      this.$refs.refTable.clearSelection();
      this.dialogVisible = false;
    },
    // 点击删除
    clickDel(index) {
      this.addForm.chargeUsers.splice(index, 1);
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../../common.less");

.header_left {
  display: flex;
}

::v-deep .el-table__empty-block {
  width: 100%;
  min-width: 100%;
  max-width: 100%;
  padding-right: 100%;
}
</style>
